import {useState} from "react";

import jsonArticleBodyHomePage from '../../axios/ArticleBodyHomePage.json'

// 导航栏
function Navbar() {
    // 下拉框显示
    const [show, setShow] = useState(false);
    // 导航栏显示
    const [navbarShow, setNavbarShow] = useState(false);
    //搜索框热搜显示
    let [isShowCheckBox, setIsShowCheckBox] = useState(false);
    let [isShowCheckBoxDropdown, setIsShowCheckBoxDropdown] = useState(false);
    return (
        <div className="container" style={{width: 100 + "%", height: 80 + "px"}}>
            <nav className="navbar fixed-top navbar-expand-lg navbar-light bg-light ">
                <img src="/favicon.ico" alt="..."/>
                <a className="navbar-brand" href="/">导航栏</a>
                <button className="navbar-toggler" type="button" data-toggle="collapse"
                        data-target="#navbarSupportedContent"
                        aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"
                        onClick={() => setNavbarShow(!navbarShow)}>
                    <span className="navbar-toggler-icon"></span>
                </button>

                <div className={"collapse navbar-collapse " + (navbarShow ? "show" : "")} id="navbarSupportedContent">
                    <ul className="navbar-nav mr-auto">
                        <li className="nav-item active"><a className="nav-link" href="/">首页 <span
                            className="sr-only"></span></a></li>
                        <li className="nav-item"><a className="nav-link" href="/Article">问答 </a></li>
                        <li className="nav-item"><a className="nav-link" href="/SuperClub">超级社团 </a></li>
                        <li className="nav-item"><a className="nav-link" href="/Money">余额充值 </a></li>
                        <li className="nav-item dropdown">
              <span className="nav-link dropdown-toggle" onClick={() => setShow(!show)} role="button"
                    data-toggle="dropdown" aria-expanded="false">
                发现
              </span>
                            {/* <div className="dropdown-menu "> */}
                            <div className={"dropdown-menu " + (show ? "show" : "")}>
                                <a className="dropdown-item" href="/Community">社区 </a>
                                <div className="dropdown-divider"></div>
                                <a className="dropdown-item" href="/RankingList">排行榜</a>
                                <a className="dropdown-item" href="/Comment">评论区</a>
                            </div>
                        </li>
                    </ul>
                    <div>
                        <form className="form-inline my-2 my-lg-0">
                            {/* onPressEnter: 回车键触发事件； onBlur:失去焦点触发事件； onFocus:获得焦点触发事件 */}
                            <input className="form-control mr-sm-2" type="search" placeholder="搜索框"
                                   aria-label="Search"
                                //  onPressEnter={isShowCheckBox:true}
                                //获取焦点显示热搜
                                   onFocus={() => {
                                       setIsShowCheckBox(isShowCheckBox = true);
                                   }}
                                //失去焦点隐藏热搜(目前无法使用a标签跳转)
                                   onBlur={() => setIsShowCheckBox(isShowCheckBox = false)}
                            />
                        </form>
                        {/* 用mouseleave/mouseenter代替mouseover/mouseout【最佳方法】mouseover 与 mouseenter:
            mouseover => 不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。
            mouseenter => 只有在鼠标指针从元素外穿入被选元素（到元素内）时，才会触发 mouseenter 事件。
            mouseout 与 mouseleave:
            mouseout => 不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。
            mouseleave => 只有在鼠标指针从元素内穿出被选元素（到元素外）时，才会触发 mouseleave 事件。 */}
                        <div className={"dropdown-menu " + (isShowCheckBox || isShowCheckBoxDropdown ? "show" : "")}>
                            <table className="table table-hover p-3 mb-2 bg-primary text-white"
                                // 鼠标移入事件
                                   onMouseEnter={() => {
                                       console.log("鼠标进入了", isShowCheckBoxDropdown);
                                       setIsShowCheckBoxDropdown(isShowCheckBoxDropdown = true);
                                   }}
                                // 鼠标移出事件
                                   onMouseLeave={() => {
                                       console.log("鼠标离开了", isShowCheckBoxDropdown);
                                       setIsShowCheckBoxDropdown(isShowCheckBoxDropdown = false)
                                   }}>
                                <tbody className='p-3 mb-2 bg-white text-dark'>
                                {/* 显示遍历推荐文章的列表 */}
                                {jsonArticleBodyHomePage.data.map(
                                    (item, index) => <tr><a className="list-group-item list-group-item-action"
                                                            href={`/ArticleContent/${item.titleID}`}>
                                        <th scope="row">{//前三名特有的序号图片
                                            index + 1 === 1 ? <img src="/img/rank1.png" style={{width: 28, height: 35}}
                                                                   alt="..."></img> :
                                                index + 1 === 2 ?
                                                    <img src="/img/rank2.png" style={{width: 24, height: 30}}
                                                         alt="..."></img> :
                                                    index + 1 === 3 ?
                                                        <img src="/img/rank3.png" style={{width: 24, height: 30}}
                                                             alt="..."></img> :
                                                        (index + 1) + "."
                                        }</th>
                                        <td className={index + 1 === 1 ? "h4" : index + 1 === 2 || index + 1 === 3 ? "h5" : "h6"}>{item.title}</td>
                                        <td className="text-black-50"><i>{item.titleBlurb}</i></td>
                                    </a></tr>)}
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <button className="btn btn-outline-success my-2 my-sm-0" type="submit">
                        <a className="list-group-item list-group-item-action" href="#">搜索</a></button>
                    <button className="btn  my-2 my-sm-0" style={{position: 'absolute', right: '0'}}>
                        <a className="nav-link"
                           href="/login">{window.location.pathname === "/login" ? "登录 / 注册" : "退出登录"} </a>
                    </button>
                    {/* <ul className="navbar-nav mr-auto" > */}
                    {/* <li className="nav-item" style={{ position: 'absolute', right: '0' }}><a className="nav-link" href="/login">登录|注册 </a></li> */}
                    {/* </ul> */}
                </div>
            </nav>
        </div>
    );
}

export default Navbar;

